<template>
  <div class="base">
    <!-- 注册登录界面 -->
    <div class="loginAndRegist">
      <!--登录表单-->
      <div class="loginArea">
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 标语 -->
          <div v-show="isShow" class="title">
            LOGIN
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 密码框和用户名框 -->
          <div v-show="isShow" class="pwdArea">
            <el-form :rules="rules" :model="user" ref="form" label-width="80px" style="margin-top: 45px;padding-right: 30px;">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="user.name">
                  <template slot="prepend">
                    <i class="el-icon-user-solid"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="密码" prop="passwd">
                <el-input v-model="user.passwd" show-password>
                  <template slot="prepend">
                    <i class="el-icon-key"></i>
                  </template>
                </el-input>
              </el-form-item>
              <div type="flex" style="padding-left: 120px;">
                <el-button type="success" @click="doLogin('form')">登陆</el-button>
                <el-button @click="doReset('form')">重置</el-button>
              </div>
            </el-form>
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 登录注册按钮 -->
          <div v-show="isShow" class="btnArea">

          </div>
        </transition>
      </div>
      <!-- 注册表单 -->
      <div class="registArea">
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!--  注册表头-->
          <div v-show="!isShow" class="rigestTitle">
            管理员注册
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!--            注册表单-->
          <div v-show="!isShow" class="registForm">
            <div style="flex: 1;display: flex;justify-content: center;align-items: center">
              用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:
              <el-input
                  placeholder="请输入用户名"
                  v-model="regUser.regUsername"
                  style="width: 165px;margin-left: 10px"
                  clearable
              >
              </el-input>
            </div>
            <div style="flex: 1;display: flex;justify-content: center;align-items: center">
              密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
              <el-input placeholder="请输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regPwd"
                        show-password></el-input>
            </div>
            <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
              确&nbsp;认&nbsp;密&nbsp;码:
              <el-input placeholder="请再次输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regRePwd"
                        show-password></el-input>
            </div>

          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!--            注册按钮-->
          <div v-show="!isShow" class="registBtn">
            <el-button type="success" round style="background-color: #257B5E;letter-spacing: 5px" @click="userRegister">
              注册
            </el-button>
          </div>
        </transition>
      </div>
      <!-- 信息展示界面 -->
      <div id="aaa" class="showInfo"
           :style="{
             borderTopRightRadius:styleObj.bordertoprightradius,
             borderBottomRightRadius:styleObj.borderbottomrightradius,
             borderTopLeftRadius:styleObj.bordertopleftradius,
             borderBottomLeftRadius:styleObj.borderbottomleftradius,
             right:styleObj.rightDis
            }"
           ref="showInfoView">

        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 没有用户输入用户名或者找不到用户名的时候 -->
          <div v-show="isShow"
               style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
            <!-- 欢迎语 -->
            <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
              欢迎登入后台管理系统
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button type="success" style="background-color:#257B5E;border: 1px solid #ffffff;" round
                         @click="changeToRegiest">还没有账户？点击注册
              </el-button>
            </div>
          </div>
        </transition>
        <!-- 用户输入用户名时展示头像以及姓名 -->
        <!--           <div>-->

        <!--           </div>-->
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 用户注册的时候展示信息 -->
          <div v-show="!isShow"
               style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
            <!-- 欢迎语 -->
            <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
              欢迎注册
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button type="success" style="background-color:#257B5E;border: 1px solid #ffffff;" round
                         @click="changeToLogin">已有账户？点击登录
              </el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      user: {
        name: null,
        passwd: null
      },
      msg: "",
      rules: {
        name: [
          {required: true, message: '请输入账户名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        passwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      },
      //===================================================
      //注册
      regUser: {
        regUsername: '',
        regRePwd: '',
        regPwd: '',
        selectValue: "",
      },
      styleObj: {
        bordertoprightradius: '15px',
        borderbottomrightradius: '15px',
        bordertopleftradius: '0px',
        borderbottomleftradius: '0px',
        rightDis: '0px'
      },
      isShow: true
    }
  },

  methods: {
    //登陆
    doLogin(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("username", this.user.name)
          param.append("password", this.user.passwd)
          this.$axios({
            url: "/api/login",
            method: "POST",
            data: param
          }).then(re => {
            if (re.data.code == 200) {
              localStorage.setItem("account", this.user.name)
              localStorage.setItem("jwt", re.data.data)
              this.$message({
                message: 'Hello World',
                duration: 3000,
                type: 'success'
              });
              this.$router.push({
                name: "Home",
                params: {account: this.user.name}
              })
            } else {
              this.$message("账号或密码输入错误")
            }
          })
        } else {
          this.$message({
            message: '爬',
            duration: 3000,
            type: 'warning'
          });
          return false;
        }
      });
    },
    doReset(form) {
      this.$refs[form].resetFields();
    },
    //==============登陆注册切换========================
    changeToRegiest() {
      this.styleObj.bordertoprightradius = '0px'
      this.styleObj.borderbottomrightradius = '0px'
      this.styleObj.bordertopleftradius = '15px'
      this.styleObj.borderbottomleftradius = '15px'
      this.styleObj.rightDis = '50%'
      this.isShow = !this.isShow
    },
    changeToLogin() {
      this.styleObj.bordertoprightradius = '15px'
      this.styleObj.borderbottomrightradius = '15px'
      this.styleObj.bordertopleftradius = '0px'
      this.styleObj.borderbottomleftradius = '0px'
      this.styleObj.rightDis = '0px'
      this.isShow = !this.isShow
    },


    //用户注册
    userRegister() {
      // if (this.regUser.regUsername === "") {
      //   this.$message.error("用户名不能为空！")
      //   return false
      // } else if (this.regUser.regPwd != this.regUser.regRePwd) {
      //   this.$message.error("两次密码输入不同，请检查后重新注册！")
      //   return false
      // } else if (this.regUser.selectValue === "") {
      //   this.$message.error("未选择审核员!")
      //   return false
      // } else {
      //   let user = {};
      //   user.name = this.regUser.regUsername
      //   user.password = this.regUser.regPwd
      //   user.auditor = this.regUser.selectValue
      //   this.request.post("http://localhost:9090/user/register", user).then(res => {
      //     if (res.code === "200") {
      //       this.$message.success("申请成功，请耐心等待管理员审核！")
      //       this.regUser = {
      //         regUsername: '',
      //         regRePwd: '',
      //         regPwd: '',
      //         selectValue: ""
      //       }
      //       this.changeToLogin()
      //     }
      //     if (res.code === "400") {
      //       this.$message.error(res.msg)
      //       return
      //     }
      //   })
      // }
    }
  },
}
</script>

<style scoped>

.base {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/images/background.jpg");
  background-size: 100%;
}

.loginAndRegist {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.loginArea {
  background-color: rgba(255, 255, 255, 0.8);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  height: 400px;
  width: 350px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.registArea {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
  width: 350px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showInfo {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: absolute;
  height: 400px;
  width: 350px;
  z-index: 2;
  top: 0;
  right: 0;
  /* background-image: url("../assets/images/welcome.png"); */
  background-color: #addfea;
  background-size: 90%;
}

.showInfo:hover {
  background-size: 100%;
  background-position: -50px -50px;
}

.title {
  width: 70%;
  flex: 1;
  border-bottom: 1px solid #257B5E;
  display: flex;
  align-items: center;
  color: #257B5E;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
}

#aaa {
  transition: 0.3s linear;
}

.pwdArea {
  width: 100%;
  flex: 2;
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;


}

.pwdArea input {
  outline: none;
  height: 30%;
  border-radius: 13px;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}

.pwdArea input:focus {
  border: 2px solid #257B5E;
}

.btnArea {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rigestTitle {
  width: 70%;
  flex: 1;
  color: #257B5E;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #257B5E;
}

.registForm {
  flex: 2;
  display: flex;
  flex-direction: column;
  color: #257B5E;
  font-size: 16px;
}

.registForm input {
  outline: none;
  height: 30%;
  border-radius: 13px;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}

.registForm input:focus {
  border: 2px solid #257B5E;
}

#elselect:focus {
  border: 2px solid #257B5E;
}

.registBtn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>

